<template>
  <!-- 收藏的简历 -->
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>{{ t('personalHomepage.m21') }}</span>
      </div>
    </template>

    <div class="list">
      <div
        class="item wp-100"
        v-for="item in listData"
        :key="item.id"
        @click="openUrl('/crewResume', { id: item.id })"
      >
        <img :src="item.headSculpture" />
        <div class="info">
          <div class="a line-1">{{ item.crewName }}</div>
          <!-- <div class="b">3 years of experience/be on the job</div> -->
          <div class="c">{{ item.crewLocation }}</div>
          <div class="c">{{ getDictLabel('duties', item.duties) }}</div>
          <div class="d flexcc">{{ getDictLabel('resume_work_status', item.crewStatus) }}</div>
        </div>
      </div>
    </div>

    <div class="flexcc mt-3">
      <el-pagination
        layout="prev, pager, next"
        :hide-on-single-page="total <= page.pageSize"
        :total="total"
        v-model:current-page="page.pageNum"
        :page-size="page.pageSize"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
  </el-card>
</template>

<script setup>
import { ref, reactive, onBeforeMount, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { collectionListApi } from '@/service/crew.js'
import { useI18n } from 'vue-i18n'
import useDict from '@/hooks/useDict'
import { openUrl } from '@/utils'

const { dictData, getDictData, getDictLabel } = useDict()

const router = useRouter()
const route = useRoute()
const { t, locale } = useI18n()

onBeforeMount(() => {
  init()
})
watch(locale, () => {
  init()
})

//
const listData = ref([])
const page = ref({
  pageNum: 1, // 当前页码
  pageSize: 9 // 每页条数
})
const total = ref(0) // 总数
const getList = () => {
  collectionListApi(page.value).then(({ rows, total: t }) => {
    listData.value = rows
    total.value = t
  })
}
const handleCurrentChange = (val) => {
  getList()
}

//
const init = () => {
  getList()
  getDictData('duties')
  getDictData('resume_work_status')
}
</script>

<style scoped lang="scss">
.list {
  display: grid;
  grid-template-columns: repeat(3, 305px);
  gap: 20px;
  .item {
    img {
      width: 100%;
      height: 170px;
    }

    .info {
      padding: 22px;
      display: grid;
      gap: 12px;
      justify-items: center;
      .a {
        font-weight: bold;
        font-size: 18px;
        width: 100%;
      }
      .b {
        color: #01358d;
      }
      .c {
        color: #6a6973;
      }
      .d {
        width: 142px;
        height: 39px;
        background: #ffffff;
        border: 1px solid #ca2a02;
        color: #ca2a02;
      }
    }
  }
}
</style>
